<template>
  <div class="new-nav-bar">
    <div class="nav-buttons">
      <div v-for="(item, index) in navItems" :key="index" class="nav-item" @click="handleNavClick(item)">
        <dv-decoration-11 style="width:180px;height:50px;">
          <div class="button-content" :class="{ 'active': item.path === currentPath }">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </div>
        </dv-decoration-11>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const currentPath = computed(() => route.path)

const navItems = ref([
  { name: '首页', icon: 'el-icon-s-home', path: '/home' },
  { name: '监测预警', icon: 'el-icon-warning', path: '/monitor' },
  { name: '指挥调度', icon: 'el-icon-s-operation', path: '/dispatch' },
  { name: '应急处置', icon: 'el-icon-warning-outline', path: '/emergency' },
  { name: '调度记录', icon: 'el-icon-document', path: '/records' }
])

const handleNavClick = (item) => {
  if (item.path !== currentPath.value) {
    router.push(item.path)
  }
}
</script>

<style lang="scss" scoped>
.new-nav-bar {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  
  .nav-buttons {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 15px;
    background: rgba(0, 24, 48, 0.6);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 194, 255, 0.2);
    
    .nav-item {
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        
        .button-content {
          color: #fff;
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }
      }
      
      :deep(.dv-decoration-11) {
        position: relative;
        
        .button-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          align-items: center;
          gap: 8px;
          color: #00c2ff;
          font-size: 16px;
          font-weight: bold;
          text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
          white-space: nowrap;
          transition: all 0.3s ease;
          
          &.active {
            color: #fff;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
          }
          
          i {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style> 